<template>
	<view>
		<UninavBar title="圈子秀" leftIcon="left"></UninavBar>

		<uni-card title="小杜的秀" margin="0px" is-shadow>
			<textarea name="" id="" cols="30" rows="10" v-model="value" placeholder="发表你的心情" :maxlength="300">
			</textarea>
			<view slot="actions" class="card-actions">
				<view class="" style="position: absolute;left: 0;bottom: 80rpx;">
					<!-- sdfvdsvcds -->
				</view>
				<view class="choseView" @click="chooseImage">
					<uni-icons type="camera" size="15"></uni-icons>
					<text>拍摄</text>
				</view>
				<view class="choseView">
					<uni-icons type="camera" size="15"></uni-icons>
					<text>图片</text>
				</view>
				<view class="choseView">
					<uni-icons type="camera" size="15"></uni-icons>
					<text>视频</text>
				</view>
				<view class="choseView">
					<uni-icons type="camera" size="15"></uni-icons>
					<text>商品</text>
				</view>
				<text style="position: absolute;right: 0;">{{value.length || 0}}/300</text>
			</view>
		</uni-card>

		<uni-card title="选中发表的圈子" margin="0" style="margin-top: 20rpx;height: 400rpx;">
			<uni-data-select v-model="submitValue" :localdata="range" style="width: 150rpx;"></uni-data-select>
			<view class="submit">提交</view>
		</uni-card>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				submitValue: 1,
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],

			}
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: function(res) {
						console.log(res, '441514514514')
					}
				});

			}

		}
	}
</script>

<style>
	.card-actions {
		display: flex;
		align-items: center;
		gap: 20rpx;
		position: relative;
		padding-bottom: 20rpx;
	}

	.choseView {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		gap: 8rpx;
		background-color: #DFDFDF;
		border-radius: 10rpx;
		padding: 10rpx;
	}

	.submit {
		width: 200rpx;
		border-radius: 50rpx;
		width: calc(100% - 40rpx);
		background-color: #FD5100;
		color: #fff;
		padding: 20rpx;
		text-align: center;
		margin-top: 150rpx;
	}
</style>